<template>
    <div class="page-container">
        <router-view></router-view>
        <van-tabbar v-model="active" placeholder>
            <van-tabbar-item icon="chart-trending-o">控制台</van-tabbar-item>
            <van-tabbar-item icon="edit">博客管理</van-tabbar-item>
            <van-tabbar-item icon="edit">页面管理</van-tabbar-item>
            <van-tabbar-item icon="newspaper-o">博客设置</van-tabbar-item>
            <van-tabbar-item icon="setting-o">系统设置</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { WapDashboardChilds } from '@/router/modules/dashboard'
import { wapblogChilds } from "@/router/modules/blog"
import { WapPageChildren } from '@/router/modules/page'
import { WapBlogSettingChildren, WapSystemSettingChildren } from '@/router/modules/setting'
export default {
    name: "WapLayout",
    data: () => ({
        tabs: [
            '/wap/dashboard',
            '/wap/blog/blogs',
            '/wap/page/pages',
            '/wap/setting/baseinfo',
            '/wap/setting/site',
        ]
    }),
    methods: {
        onTabChange(e) {
            console.log(e)
        },
        onActionSheetSelect(e) {
            this.onActionSheetSelectFunc(e)
        }
    },
    computed: {
        active: {
            get() {
                if (WapDashboardChilds.includes(this.$route.path)) {return 0}
                if (wapblogChilds.map(v => v.path).includes(this.$route.path)) {return 1}
                if (WapPageChildren.map(v => v.path).includes(this.$route.path)) {return 2}
                if (WapBlogSettingChildren.map(v => v.path).includes(this.$route.path)) {return 3}
                if (WapSystemSettingChildren.map(v => v.path).includes(this.$route.path)) {return 4}
                return 4
            },
            set(e) {
                this.$router.replace(this.tabs[e])
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
</style>
